<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/ben.css">
    <link rel="stylesheet" href="css/font-awesome.css" />

    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script src="./bootstrap/js/bootstrap.js"></script>

    <link rel="stylesheet" href="./css/head.css">
</head>
<style>
    .mynavbar {
        background-color: #242424 !important;
        /* 尽量不要设置大盒子的高度,大盒子的高度使用内容撑开 */
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .mynavbar .navbar-brand {
        height: 70px;
        background: url(./images/topbar.png) no-repeat 0 0px;
        width: 157px;
        font-size: 0;
    }
    
    .mynavbar .navbar-nav .nav-link {
        padding: 0 19px;
        display: block;
        height: 70px;
        line-height: 70px;
        color: #cccccc;
        font-size: 14px;
        /* 相对定位 */
        position: relative;
    }
    
    .mynavbar .navbar-nav .nav-link .icon_arrow {
        background: url(images/topbar.png) no-repeat -226px 0;
        width: 12px;
        height: 6px;
        position: absolute;
        left: 50%;
        margin-left: -6px;
        bottom: 0;
    }
    
    .mynavbar .navbar-nav .nav-link .icon_hot {
        background: url(images/topbar.png) no-repeat -192px 0;
        width: 26px;
        height: 13px;
        position: absolute;
        right: -18px;
        top: 22px;
    }
    
    .mynavbar .navbar-nav .nav-link:hover,
    .mynavbar .navbar-nav .nav-link:focus {
        color: #ffffff;
        background: #000000;
    }
    
    .mynavbar .navbar-nav .show>.nav-link,
    .mynavbar .navbar-nav .active>.nav-link,
    .mynavbar .navbar-nav .nav-link.show,
    .mynavbar .navbar-nav .nav-link.active {
        color: #ffffff;
        background: #000000;
    }
    
    .mynavbar .form-inline {
        position: relative;
    }
    
    .mynavbar .form-inline .form-control {
        padding: 0;
        width: 162px;
        padding-left: 32px;
        height: 32px;
        border-radius: 20px;
        font-size: 12px;
        border: 0;
    }
    
    .mynavbar .form-inline .form-control::-webkit-input-placeholder {
        color: #9b9b9b;
    }
    
    .mynavbar .form-inline::after {
        content: "";
        position: absolute;
        left: 10px;
        top: 12px;
        background: url(images/topbar.png) no-repeat -10px -108px;
        width: 13px;
        height: 14px;
    }
    
    .mynavbar .form-inline .form-control:focus {
        border: 0;
        box-shadow: 0 0 0 0.2rem transparent;
    }
    
    .mynavbar .form-inline .btn {
        width: 88px;
        height: 30px;
        padding: 9px 17px;
        font-size: 12px;
        padding: 0;
        color: #cccccc;
        border-radius: 20px;
        border-color: #4f4f4f;
    }
    
    .mynavbar .form-inline .btn:hover {
        color: #fff;
        background-color: transparent;
        border-color: #cccccc;
    }
    
    .mynavbar .login {
        margin-left: 18px;
        font-size: 12px;
        color: #787878;
    }
    
    .mynavbar .login:hover {
        color: #777777;
        text-decoration: underline;
    }
    
    .mynavbar .navbar-toggler {
        background: white;
    }
    
    .mynavbar button:focus {
        outline: none;
    }
</style>

<body>
    <!-- 主体 -->
    <div class="box">

        <!-- 头部 -->
        <div class="header">
            <nav class="navbar navbar-expand-lg navbar-light bg-light mynavbar">
                <!-- 响应式容器 -->
                <div class="container">
                    <a class="navbar-brand" href="#">Logo</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">发现音乐
                                    <span class="sr-only">(current)</span>

                                    <!-- 箭头图标 -->
                                    <span class="icon_arrow d-none d-xl-block"></span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="#">我的音乐</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="#">朋友</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="#">商城</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="#">音乐人</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="#">下载客户端
                                    <!-- 热门图标 -->
                                    <span class="icon_hot d-none d-xl-block"></span>
                                </a>
                            </li>
                        </ul>

                        <form class="form-inline my-2 my-lg-0 d-none d-xl-block">
                            <input class="form-control mr-sm-2" type="search" placeholder="音乐/视频/电台/用户" aria-label="Search">
                            <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">创作者中心</button>
                        </form>

                        <a href="#" class="login">登录</a>

                    </div>
                </div>

            </nav>

            <div class="min_bar">
                <div class="container">
                    <ul class="minbar_list">

                        <li><a href="#" class="active"> 推荐</a></li>
                        <li><a href="#"> 排行榜</a></li>
                        <li><a href="#"> 歌单</a></li>
                        <li><a href="#"> 主播电台</a></li>
                        <li><a href="#"> 歌手</a></li>
                        <li><a href="#"> 新碟上架</a></li>
                    </ul>
                </div>
            </div>
            <script>
            </script>
            <div class="rotation">

                <div class="center">
                    <div class="left">
                        <ul>
                            <li>
                                <a href="#"><img src="images/lunbotu07.jpg" /></a>
                            </li>
                            <li>
                                <a href="https://music.163.com/#/song?id=1893975439"><img src="images/lunbotu01.jpg" /></a>
                            </li>
                            <li>
                                <a href="#"><img src="images/lunbotu02.jpg" /></a>
                            </li>
                            <li>
                                <a href="#"><img src="images/lunbotu03.jpg" /></a>
                            </li>
                            <li>
                                <a href="#"><img src="images/lunbotu04.jpg" /></a>
                            </li>
                            <li>
                                <a href="#"><img src="images/lunbotu05.jpg" /></a>
                            </li>
                            <li>
                                <a href="#"><img src="images/lunbotu06.jpg" /></a>
                            </li>
                            <li>
                                <a href="#"><img src="images/lunbotu07.jpg" /></a>
                            </li>
                            <li>
                                <a href="#"><img src="images/lunbotu01.jpg" /></a>
                            </li>
                        </ul>
                    </div>
                    <!-- <div class="btns"> -->
                    <span class="btn_lt"></span>
                    <span class="btn_rt"></span>
                    <!-- </div> -->
                    <div class="suoyin">
                        <ul>
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>

                    <div class="right">
                        <p class="download">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中部 -->
        <div class="centext">
            <div class="left-top">
                <div class="meg-left-top"></div>

                <div class="meg-left-bottom">

                    <!-- <div class="top">

                            <div class="top-left">
                                <span></span>
                                <p>榜单</p>
                            </div>

                            <div class="top-right">
                                <p><a>更多</a></p>
                                <span></span>
                            </div>

                        </div>


                        <div class="bottom">

                            <div class="bottom-diyi">
                                <img src="./images/飙升榜.jpg" style="width: 80px; height: 80px;" alt="">
                                <div class="img-name1">
                                    <h3 title="飙升榜">飙升榜</h3>
                                    <span class="span1" title="播放"></span>
                                    <span class="span2" title="收藏"></span>
                                </div>
                            </div>

                            <div class="bottom-diyi">
                                <img src="./images/新歌榜.jpg" style="width: 80px; height: 80px;" alt="">
                                <div class="img-name1">
                                    <h3 title="新歌榜">新歌榜</h3>
                                    <span class="span1" title="播放"></span>
                                    <span class="span2" title="收藏"></span>
                                </div>
                            </div>

                            <div class="bottom-diyi">
                                <img src="./images/原创榜.jpg" style="width: 80px; height: 80px;" alt="">
                                <div class="img-name1">
                                    <h3 title="原创榜">原创榜</h3>
                                    <span class="span1" title="播放"></span>
                                    <span class="span2" title="收藏"></span>
                                </div>
                            </div>


                            <div class="bottom-list">

                                <ul>
                                    <li>
                                        <p>1</p>
                                        <a href="" title="删了吧">删了吧
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>2</p>
                                        <a href="" title="浪漫主义">浪漫主义
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>3</p>
                                        <a href="" title="路过人间">路过人间
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>4</p>
                                        <a href="" title="指纹">指纹
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>5</p>
                                        <a href="" title="Bite Me">Bite Me
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>6</p>
                                        <a href="" title="没你也能活下去">没你也能活下去
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>7</p>
                                        <a href="" title="都不懂">都不懂
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>8</p>
                                        <a href="" title="百年孤寂">百年孤寂
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>9</p>
                                        <a href="" title="水中花">水中花
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>10</p>
                                        <a href="" title="光亮">光亮
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>

                                        <a href="">查看全部&gt;</a>

                                    </li>
                                </ul>

                                <ul>
                                    <li>
                                        <p>1</p>
                                        <a href="" title="删了吧">一则废话
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>2</p>
                                        <a href="" title="浪漫主义">不会大声说话
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>3</p>
                                        <a href="" title="路过人间">信号失灵
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>4</p>
                                        <a href="" title="指纹">Another Time
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>5</p>
                                        <a href="" title="Bite Me">小丑马戏
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>6</p>
                                        <a href="" title="没你也能活下去">暴雨中
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>7</p>
                                        <a href="" title="都不懂">异地恋
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>8</p>
                                        <a href="" title="百年孤寂">入冬
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>9</p>
                                        <a href="" title="水中花">知寒
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>10</p>
                                        <a href="" title="光亮">STAY
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>

                                        <a href="">查看全部&gt;</a>

                                    </li>
                                </ul>

                                <ul>
                                    <li>
                                        <p>1</p>
                                        <a href="" title="删了吧">删了吧
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>2</p>
                                        <a href="" title="浪漫主义">浪漫主义
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>3</p>
                                        <a href="" title="路过人间">路过人间
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>4</p>
                                        <a href="" title="指纹">指纹
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>5</p>
                                        <a href="" title="Bite Me">Bite Me
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>6</p>
                                        <a href="" title="没你也能活下去">没你也能活下去
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>7</p>
                                        <a href="" title="都不懂">都不懂
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>8</p>
                                        <a href="" title="百年孤寂">百年孤寂
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>9</p>
                                        <a href="" title="水中花">水中花
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>
                                        <p>10</p>
                                        <a href="" title="光亮">光亮
                                                <div class="span-btn">
                                                    <span title="播放"></span>
                                                    <p title="添加到播放列表">＋</p>
                                                    <span title="收藏"></span>
                                                </div>
                                            </a>

                                    </li>
                                    <li>

                                        <a href="">查看全部&gt;</a>

                                    </li>
                                </ul>
                            </div> -->


                    <!-- </div> -->


                </div>
            </div>
            <div class="right-top"></div>
        </div>

        <!-- 尾部 -->
        <div class="tail">
            <div class="wenzi">
                <p class="link">
                    <a href="#" class="fam-1">服务条款</a>
                    <span class="line">|</span>
                    <a href="#" class="fam-1">隐私政策</a>
                    <span class="line">|</span>
                    <a href="#" class="fam-1">儿童隐私政策</a>
                    <span class="line">|</span>
                    <a href="#" class="fam-1">版权投诉指引</a>
                    <span class="line">|</span>
                    <a href="#" class="fam-1">意见反馈</a>
                    <span class="line">|</span>
                    <a href="#" class="fam-1">广告合作</a>
                </p>

                <div class="left-mon">
                    <div class="clese">
                        <span>网易公司版权所有&copy1997-2021</span>
                        <span>杭州乐读科技有限公司运营：<a href="#" class="min-ming">浙网文[2021] 1186-054号</a></span>
                    </div>
                    <div class="clese">
                        <span>违法和不良信息举报电话：0571-89853516</span>
                        <span> 举报邮箱：<a href="#" class="min-ming">ncm5990@163.com</a></span>
                    </div>
                    <div class="clese">
                        <a href="#" class="min-ming">粤B2-20090191-18&nbsp&nbsp工业和信息化部备案管理系统网站</a>
                        <a href="#" class="min-ming">浙公网安备 33010902002564号</a>
                    </div>
                </div>

                <div class="right-mon">

                    <a href="#" class="beng-dg">
                        <img src="./imges/A.png" alt="">
                        <p>Amped&nbsp;Studio</p>
                    </a>

                    <a href="#" class="beng-dg">
                        <img src="./imges/dun.png" alt="">
                        <p>用户认证</p>
                    </a>

                    <a href="#" class="beng-dg">
                        <img src="./imges/pan.png" alt="">
                        <p>独立音乐人</p>
                    </a>

                    <a href="#" class="beng-dg">
                        <img src="./imges/shang.png" alt="">
                        <p>奖赏</p>
                    </a>

                    <a href="#" class="beng-dg">
                        <img src="./imges/bo.png" alt="">
                        <p>视频奖励</p>
                    </a>

                </div>
            </div>
        </div>

        <!-- 播放栏 -->
        <div class="dain">

            <!-- 锁定 -->
            <div class="dian-locking">

                <div class="left-fe-1">
                    <a href="#" class="btn-botton"></a>
                </div>

                <div class="right-fe-2"></div>
            </div>

            <div class="left-page"></div>
            <!-- 展开播放条 -->
            <div class="hand-locking"></div>

            <!-- 状态栏 -->
            <div class="werp-botton" style="margin-left: -498px;">
                <!-- 上一首下一首暂停播放 -->
                <div class="btns-botton">
                    <!-- 上一首 -->
                    <a href="#" class="pve"></a>
                    <!-- 暂停播放 -->
                    <a href="#" class="sop fa fa-play"></a>
                    <!-- 下一首 -->
                    <a href="#" class="pvp"></a>
                </div>

                <!-- 图标 -->
                <div class="head-logo">
                    <img src="./imges/doon.png" alt="">
                    <a href="#" class="makes"></a>
                </div>

                <!-- 进度条 时间 -->
                <div class="progres-bar">
                    <!-- 上层的空鼓 -->
                    <div class="bar-words"></div>
                    <!-- 进度条 -->
                    <div class="m-par-der">
                        <div class="bar-bardg">
                            <div class="rdy" style="width: 0%;"></div>
                            <div class="cur" style="width: 0%;">
                                <span class="f-tdn">
                                    <li></li>
                                </span>
                            </div>

                            <!-- 显示时间 -->
                            <span class="music-time">
                                <em>0:00</em>/0:00
                            </span>
                        </div>
                    </div>


                </div>

                <!-- 歌词收藏分享 -->

                <div class="open-fm-1">
                    <a href="#" class="icn-2 lyric" title="歌词"></a>
                    <a href="#" class="icn-2 collection" title="收藏"></a>
                    <a href="#" class="icn-2 share" title="分享"></a>
                </div>

                <!-- 音量循环歌单 -->
                <div class="ctrl-fm-2">
                    <a href="#" class="icn-2 volume"></a>
                    <a href="#" class="icn-2 loop"></a>
                    <a href="#" class="icn-2 song-sheet"></a>
                </div>
            </div>


            <!-- 返回顶部 -->
            <div class="top-bottom">

            </div>
        </div>

    </div>

    <script src="./js/head.js"></script>
    <script src="./js/ben.js"></script>
</body>

</body>

</html>